<style scoped>
.banner{
    width:100%;
    height:120px;
}

.banner img{
    width:100%;
    height:120px;
    object-fit: cover;
}

.sidebar {
    width:99px;
    height:calc( 100vh - 170px );
    position: relative;
    border-right:1px solid #e9e9e9;
    float: left;
}

.sidebar .sidebar-in {
    position: absolute;
    width:100px;
    top:0px;
    left:0px;
}

.sidebar .sidebar-in a{
    display: block;
    width:99px;
    height:38px;
    line-height: 38px;
    border-right:1px solid #e9e9e9;
    border-top:1px solid #FFF;
    border-bottom:1px solid #FFF;
    text-align: center;
}

.sidebar .sidebar-in a.active{
    border-right:1px solid #FFF;
    border-top:1px solid #e9e9e9;
    border-bottom:1px solid #e9e9e9;
}
.contactbox {
    width: calc( 100% - 100px );
    height:calc( 100vh - 170px );
    overflow: auto;
    float: left;
}

.contactbox a{
    display: block;
    width:50%;
    padding:12px;
    border-bottom:1px solid #e9e9e9;
    border-right:1px solid #e9e9e9;
    box-sizing: border-box;
    float: left;
}

.contactbox a img{
    display: block;
    width:calc( 100% - 24px );
    object-fit: cover;
}

.contactbox a p.price{
    color:#EB5221;
    margin-top:6px;
    font-size:14px;
}

</style>

<template>
    <div>
        <div class="banner">
            <img src="https://img.alicdn.com/simba/img/TB18voJihYaK1RjSZFnSuu80pXa.jpg_q50.jpg" alt="">
        </div>
        <div class="sidebar">
            <div class="sidebar-in">
                <a href="javascript:;" v-for="(item) in types" :key="item.id" :class="{'active':item.id===selTypeId}" @click="typeSel(item.id)">{{item.name}}</a>
            </div>
        </div>
        <div class="contactbox">
            <router-link :to="'/mlapp/detail/'+item.id" v-for="item in goods" :key="item.id">
                <img :src="item.img" alt="">
                <p class="price">￥{{item.price}}</p>
            </router-link>
        </div>
        <div class="cb"></div>
    </div>
</template>
<script>
import data from '../data.js'
export default {
    name:'index',
    data(){
        return {
            types:[],
            selTypeId:null,
            goods:[]
        }
    },
    methods:{
        typeSel(id){
            this.selTypeId=id
            this.goods=[];
            this.goods=data.getGoodsByType(id)
        }
    },
    mounted(){
        this.types=data.getAllTypes()
        this.selTypeId=this.types[0].id
        this.goods=data.getGoodsByType(this.selTypeId)
    }
}
</script>

